@mixin flex-column {
  display: flex;
  flex-direction: column;
}

@mixin flex-row {
  display: flex;
  flex-direction: row;
}

.annual-diy-spec-num-wrap {
  box-sizing: border-box;
  overflow-x: hidden;
  background: #F5F5F5;
  .btn-wrap {
    position: fixed;
    box-sizing: border-box; 
    width: 100%;
    height: 112rpx;
    bottom: 0rpx;
    left: 0;
    right: 0;
    z-index: 102;
    background: #ffffff;
    @include flex-row;
    align-items: center;
    justify-content: space-between;
    padding: 0 24rpx;
    font-size: 20rpx;
    color: #FF3B30;
    .price {
      font-size: 42rpx;
      margin-right: 12rpx;
    }
    .origin-price {
      font-size: 24rpx;
      color: #999999;
      text-decoration: line-through;
    }
    .btn {
      .at-button {
        width: 200rpx;
        height: 80rpx;
        line-height: 80rpx;
      }
    }
  }

  .list {
    box-sizing: border-box;
    width: 100%;
    .info-wrap {
      background-color: #ffffff;
      .at-noticebar {
        @include flex-row;
        align-items: center;
        width: 100vw;
        height: 72rpx;
        line-height: 71rpx;
        color: #999999;
        font-size: 24rpx;
        background: #ffffff;
        z-index: 100;
        .at-noticebar__content-icon .at-icon {
          font-size: 40rpx;
        }
      }
      .count {
        @include flex-row;
        align-items: center;
        justify-content: space-between;
        height: 120rpx;
        padding: 0 24rpx;
        .desc {
          margin-right: 15rpx;
          color: #333333;
          font-size: 30rpx;
        }
        .input-num {
          @include flex-row;
          .number-action {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44rpx;
            height: 44rpx;
            line-height: 22rpx;
            border-radius: 22rpx;
            text-align: center;
            border: 1PX solid #f5f5f5;
            &.down {
              // border-radius: 6px 0px 0px 6px;
              border-right: 0;
            }
            &.up {
              background-color: #1287FF;
              background-image: linear-gradient(to right, #1287FF, #12B3FF);
              // border-radius: 0px 6px 6px 0px;
              border-left: 0;
            }
          }
          .number {
            width: 60rpx;
            height: 50rpx;
            line-height: 48rpx;
            text-align: center;
            color: #333333;
            font-size: 26rpx;
            font-weight: bold;
          }
        }
      }
    }
    
    .content-wrap {
      box-sizing: border-box;
      position: relative;
      padding-top: 20rpx;
      padding-bottom: 142rpx;
      width: 100%;

      .item-info {
        box-sizing: border-box;
        position: relative;
        @include flex-row;
        justify-content: flex-start;
        overflow: hidden;
        align-items: center;
        min-height: 228rpx;
        width: 100%;
        padding-left: 24rpx;
        overflow: hidden;
        background-color: #ffffff;
        &:after {
          position: absolute;
          content: '';
          left: 24rpx;
          bottom: 0;
          width: 100%;
          height: 2rpx;
          background-color: #F5F5F5;
        }
        .left {
          display: flex;
          align-items: center;
          width: 180rpx;
          .annual-img {
            height: 180rpx;
            width: 180rpx;
            object-fit: cover;
            border-radius: 10rpx;
            background-color: #eee;
          }
        }

        .right {
          box-sizing: border-box;
          width: calc(100% - 180rpx);
          height: auto;
          // margin-left: 24rpx;
          padding: 24rpx;
          color: #333333;
          font-size: 26rpx;
          @include flex-column;

          .goods-name {
            // max-height: 75rpx;
            width: 100%;
            .goods-name-wrap {
              display: inline-flex;
              flex-wrap: wrap;
              word-break: break-all; 
              text-overflow: ellipsis;
              overflow:hidden;
              display:-webkit-box;
              -webkit-line-clamp:2; /*这个数字是设置要显示省略号的行数*/
              -webkit-box-orient:vertical;
            }
          }

          .r-bottom-wrap {
            @include flex-column;
            flex: 1;
            justify-content: space-between;
            margin-top: 12rpx;

            .r-bottom {

              &-t {
                @include flex-row;
                align-items: center;
                color: #666666;
                font-size: 20rpx;

                .tag {
                  max-width: 300rpx;
                  padding: 3rpx 24rpx;
                  border-radius: 10rpx;
                  font-size: 24rpx;
                  margin-right: 12rpx;
                  background-color: #F5F5F5;
                }
              }

              &-b {
                @include flex-row;
                justify-content: space-between;
                margin-top: 8rpx;
                font-size: 20rpx;
                color: #FF3B30;

                .price {
                  font-size: 42rpx;
                  margin-right: 12rpx;
                }

                .origin-price {
                  font-size: 24rpx;
                  color: #999999;
                  text-decoration: line-through;
                }

                &-r {
                  align-self: flex-end;
                  color: #333333;
                  font-size: 26rpx;
                }
              }
            }
          }
        }
      }
    }
  }
}